<template>

  <el-tabs type="card">
    <el-tab-pane>
      <span slot="label"> 待安排课表</span>
      <el-table
          :border="true"
          :data="list"
          highlight-current-row
          max-height="680"
          style="width: 100%"

      >
        <el-table-column label="序号"
                         type="index"
                         width="50"/>
        <el-table-column v-for="({label,target},index) in list_target_setting"
                         :key="target"
                         :label="label"
                         :prop="target"
        >
        </el-table-column>
        <el-table-column
            label="操作"
            fixed="right"
            width="125"
        >
          <template slot-scope="scope">
            <el-button plain
                       type="success"
                       @click="handleToArrangeCourse(scope.row)"
            >安排时间
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          :current-page="currentPage"
          :page-size="currentPageSize"
          :page-sizes="[10, 50, 100, 500, 1000, 99999]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleGetBySizeToArrangeCourses"
          @current-change="handleGetByNumToArrangeCourses"
      />
    </el-tab-pane>
    <el-dialog
        :visible.sync="dialogShow"
        fullscreen
    >
      <span slot="title" style="text-align: center">
        <h3>正在安排<a style="color: #00a0e9">{{ info.courseName }}</a>的课表</h3>
        <p v-if="!!info.teacherEntity">上课教师：{{ info.teacherEntity.teacherName }}</p>
      </span>
      <form-for-arrange v-if="dialogShow"
                        ref="arrangeForm"
                        :teacher-id="info.teacherId"
                        :course-id="info.courseId"
                        :arrange-time-array="[]"
                        :course-arrange-hours="info.courseArrangeHours"/>
      <div slot="footer" align="center" class="form-container-btn">
        <el-button type="success" plain @click="handleConfirmArrange($refs['arrangeForm'],info['courseArrangeHours'])">
          确定
        </el-button>
        <el-button type="danger" plain @click="handleCancel">取消</el-button>
      </div>
    </el-dialog>
  </el-tabs>

</template>
<script>
import FormForArrange from "@/views/courseManage/components/formForArrange";

export default {
  components: { FormForArrange },
  data () {
    return {
      list_target_setting: [
        {
          label: "课程名称",
          target: "courseName",
        }, {
          label: "课程价格",
          target: "courseArrangePrice",
        },
        {
          label: "课程人数",
          target: "coursePeople",
        },
        {
          label: "课程简介",
          target: "courseDisc",
        },
      ],
      list: [],
      currentPage: 1,
      currentPageSize: 10,
      total: 0,
      targetCourse: {},
      dialogShow: false,
      info: {},
    };

  },
  mounted () {
    this.handleGetCourse();
  },
  methods: {
    handleToArrangeCourse (info) {
      this.targetCourse = info;
      this.info = info;
      // console.log("info.teacherId-->", info.teacherId);
      this.dialogShow = true;

    },
    async handleGetBySizeToArrangeCourses (size) {
      console.log("size-->", size);
      this.currentPageSize = size;
      await this.handleGetCourse();
    },
    async handleGetByNumToArrangeCourses (page) {
      console.log("page-->", page);
      await this.handleGetCourse();

    },
    async handleGetCourse () {
      const {
        currentPageSize,
        currentPage,
      } = this;
      console.log("currentPage,currentPageSize-->", currentPage, currentPageSize);
      const res = await this.$http.courseFGetCourseByStatus({
        pageNumber: currentPage,
        pageSize: currentPageSize,
        status: 0,
      });

      if (res.code !== 0) return null;

      const {
        list,
        totalCount,
      } = res.data;
      [this.list, this.total] = [list, totalCount];
    },
    async handleConfirmArrange (ref, courseArrangeHours) {
      const {
        arrangeTimeArray,
        arrangedTime,
      } = ref;
      const remainArrangeTime = courseArrangeHours - arrangedTime;
      if (remainArrangeTime < 0) return this.$message.warning("你已经超过可安排的课时,请做出调整😟");
      if (remainArrangeTime > 0) return this.$message.warning("您还没有排满安排的课时,请继续安排😕");
      const res = await this.$http.courseCourseToBeArranged(
          [...arrangeTimeArray],
      );
      if (res.code !== 0) return null;
      // return this.$router.go(0);

    },
    handleCancel () {
      this.dialogShow = false;
    },
  },

};
</script>

